const app = Vue.createApp({
    name: "home",
    components: { editInfo },
    props: {
        name2: {
            type: String,
            required: false,
            default: "名称"
        }
    },
    setup(props, context) {
        const defaultUserInfo = {
            name: "",
            sex: "2",
            birth: ""
        }
        const editInfoRef = Vue.ref(null)
        let addInfoDialog = Vue.ref(false) // 是否显示添加信息弹窗
        const studentInfoList = Vue.reactive({ // 学生信息列表
            list: [
                {
                    id: "a01",
                    name: 'Tom',
                    sex: "1",
                    birth: "2000-01-01"
                },
                {
                    id: "a02",
                    name: 'Anne',
                    sex: "0",
                    birth: "2001-05-01"
                },
                {
                    id: "a03",
                    name: 'Jack',
                    sex: "2",
                    birth: ""
                }
            ]
        })
        const userInfo = Vue.reactive({ // 用户信息
            form: defaultUserInfo
        })

        // 性别编码转中文
        const sexToText = (sex) => {
            return new common().sexToText(sex)
        }
        // 出生日期转年龄
        const birthToAge = (birth) => {
            return new common().birthToAge(birth)
        }

        // 关闭添加信息弹窗
        const addInfoClose = () => { 
            console.log("关闭添加信息弹窗");
            addInfoDialog.value = false
        }
        // 添加信息
        const addInfo = () => { 
            userInfo.form = defaultUserInfo
            addInfoDialog.value = true
        }
        // 添加信息弹窗-确定
        const addInfoConfirm = () => {
            var data = editInfoRef.value.submitForm()
            console.log("添加信息弹窗-确定", data);
            if (!data) return;

            var isAdd = true;
            for (let i = 0, iLen = studentInfoList.list.length; i < iLen; i++) {
                const item = studentInfoList.list[i];
                if (item.id === data.id) {
                    studentInfoList.list[i] = data;
                    isAdd = false;
                    break
                }
            };
            if (isAdd) studentInfoList.list.push(data);
            addInfoDialog.value = false
            userInfo.form = defaultUserInfo
        }
        // 编辑信息
        const editInfo = (id) => { 
            var data = null;
            for (let i = 0, iLen = studentInfoList.list.length; i < iLen; i++) {
                const item = studentInfoList.list[i];
                if (item.id === id) {
                    data = item
                    break
                }
            };
            userInfo.form = data
            addInfoDialog.value = true
        }
        // 删除信息
        const delInfo = (id) => { 
            for (let i = 0, iLen = studentInfoList.list.length; i < iLen; i++) {
                const item = studentInfoList.list[i];
                if (item.id === id) {
                    studentInfoList.list.splice(i, 1)
                    break
                }
            };
        }

        return {
            props,
            editInfoRef,
            userInfo,
            addInfoDialog,
            studentInfoList,
            sexToText,
            birthToAge,
            addInfo,
            editInfo,
            delInfo,
            addInfoClose,
            addInfoConfirm
        }
    },
    template: `
        <div class="home">
            <a href="./views/template-page.html">模板页面</a>
            <el-button type="primary" size="mini" @click="addInfo()">添加信息</el-button>

            <el-table :data="studentInfoList.list" style="width: 560px">
                <el-table-column type="index" width="50" label="序号" align="center"/>
                <el-table-column prop="name" label="姓名" width="120" align="center"/>
                <el-table-column label="性别" width="50" align="center">
                    <template #default="scope">
                        {{sexToText(scope.row.sex)}}
                    </template>
                </el-table-column>
                <el-table-column prop="birth" label="年龄" width="80" align="center">
                    <template #default="scope">
                        {{birthToAge(scope.row.birth)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" size="mini" @click="editInfo(scope.row.id)">编辑</el-button>
                        <el-button type="primary" size="mini" @click="delInfo(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog
                v-model="addInfoDialog"
                title="添加信息"
                width="30%"
                :before-close="addInfoClose"
            >
                <div>
                    <edit-info 
                        v-if="addInfoDialog" 
                        ref="editInfoRef" 
                        :userInfo="userInfo.form" 
                    />
                </div>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addInfoDialog = false">关闭</el-button>
                        <el-button type="primary" @click="addInfoConfirm">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    `
})
app.use(ElementPlus);
app.mount('#app')